<%-- 
    Document   : index
    Created on : Mar 14, 2013, 3:23:52 PM
    Author     : Stephen'sSSD
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
        <script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
        <link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">
        <link rel="stylesheet" href="css/subCSS/imageCSS.css">
        <script>
            var tripId = 1; // HERE I AM USING DEFAULT 1, we will get the tripId / eventId from the accountpage.js
            var eventId = -1;
            $(document).ready(function(){
                $("#test").load("./GetImagesServlet?tripId=1");
            });
            function reload(){
                $("#test").load("./GetImagesServlet?tripId=1");
            }            
            function closeImage(){
                $("#bigDiv").html("");
                $("#bigDiv").css("display","none");
            }
            function enlarge(num){
                $("#bigDiv").css("display","block");
                var src = $("#image_" + num).attr("src");
                $("#bigDiv").html("<center><img id='bigImage' src='" + src + "' onclick='closeImage()' /></center>");

            }
            function submitForm(){
                $("#uploadForm").attr("action","./Upload?tripId=" + tripId + "&eventId=" + eventId);
                $("#uploadForm").submit();
            }
        </script>
        <style>
            #bigDiv{
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:100%;
                overflow:auto;
                background-color: black;
                display:none;
            }
            #bigImage{
            }
        </style>
    </head>
    <body>
        <form method="POST" enctype="multipart/form-data" action="./Upload" id="uploadForm">
            File to upload: <input type="file" name="upfile"><br/>
            Notes about the file: <input type="text" name="note"><br/>
            <br/>
            <input type="button" value="Press" onclick="submitForm()"/> to upload the file!
        </form>
        <input type="button" value="Reload Images" onclick="reload()" />
        <div id="test">
        </div>
        <div id="bigDiv">

        </div>

    </body>
</html>
